class Snake{
  // 表示蛇头元素
  head:HTMLElement
  // 表示蛇身体包括蛇头
  // HTMLCollection实时刷新
  bodies: HTMLCollection
  element: HTMLElement

  constructor() {
    // 取snake的第一个div元素
    this.head = document.querySelector('#snake > div') as HTMLElement
    this.bodies = document.getElementById('snake')!.getElementsByTagName('div')
    this.element = document.getElementById('snake')!
  }

  // 定义一个获取蛇头x坐标
  get x(){
    return this.head.offsetLeft
  }
  // 定义一个获取蛇头x坐标
  get y(){
    return this.head.offsetTop
  }
  set x(value: number){
    if(this.x === value){
      return
    }

    // 是否撞墙
    if(value <0 || value> 290){
      throw new Error('蛇撞墙了')
    }

    // 禁止调头
    if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value)
    // console.log('水平方向调头')
    // 发生调头继续向反方向移动
    if(value>this.x){
      value = this.x -10
    }else{
      value = this.x + 10
    }

    // 移动身体
    this.moveBody()
    this.head.style.left = value+'px'
    // 检查是否撞到自己
    this.checkBodyHead()
  }
  set y(value: number){
    if(this.y === value){
      return
    }
    // 是否撞墙
    if(value <0 || value> 290){
      throw new Error('蛇撞墙了')
    }

    // 禁止调头
    if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value)
    // console.log('垂直方向调头')
    // 发生调头继续向反方向移动
    if(value>this.y){
      value = this.y -10
    }else{
      value = this.y + 10
    }

    // 移动身体
    this.moveBody()
    this.head.style.top = value+'px'
    // 检查是否撞到自己
    this.checkBodyHead()
  }
  // s蛇增加身体的方法
  addBody(){
    // 向element增加一个div
    this.element.insertAdjacentHTML("beforeend", "<div></div>")
  }
  // 身体移动
  moveBody(){
    for(let i=this.bodies.length-1; i>0;i--){
      // 获取前面位置
      let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
      let Y = (this.bodies[i-1] as HTMLElement).offsetTop;

      // 设置到当前身体上
      (this.bodies[i] as HTMLElement).style.left = X + 'px';
      (this.bodies[i] as HTMLElement).style.top = Y + 'px';
    }
  }

  // 检查身体与头有没有相撞
  checkBodyHead(){
    for(let i= 1;i<this.bodies.length;i++){
      let bd = this.bodies[i] as HTMLElement
      if(this.x === bd.offsetLeft &&this.y === bd.offsetTop){
        // 撞到身体
        throw new Error('撞到自己')
      }
    }
  }
}
export default Snake